/* reset */
html{color:#000;background:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:16px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
img{border:none;}
em,strong{font-style:normal;font-weight:normal;}
li{list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
h1{font-size:18px;}
h2{font-size:16px;}
h3{font-size:14px;}
h4, h5, h6{font-size:100%;}
q:before,q:after{content:'';}               /* 消除q前后的内容 */
button,input,select,textarea{font-size:100%;}
/* 使得表单元素在 ie 下能继承字体大小 */
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
address,cite,dfn,em,var{font-style:normal;} /* 将斜体扶正 */
a{color:#37a;text-decoration:none;}         /* link */
a:hover{color:#f60;}

.clearfix { clear: both; }

/* header.vue */
.top { padding-top: 15px; color: #000; }
.top a { color: inherit; }
.top-left { float: left; height: 40px; line-height: 40px; cursor: pointer; }
.top-right { float: right; height: 40px; line-height: 40px; }
.top-right img { width: 40px; height: 40px; border-radius: 20px;}
.top-right i { width: 20px; height: 20px; line-height: 20px; margin-left: -35px; }
.top-right input {
  width: 150px; height: 20px;
  border-radius: 10px; border: 1px solid #dcdfe6; outline: none;
  text-indent: 8px;
}
.top-bottom { width: 100%; height: 40px; line-height: 40px; clear: both; }
.top-bottom ul { margin: 0 auto; padding-left: 0; }
.top-bottom ul li { float: left; margin-left: 15px; list-style: none; }
.top-bottom ul li:first-child { margin-left: 0; }

/* index */
.banner { width: 100%; margin: 30px 0 10px; text-align: center; }
.footer { width: 100%; padding: 20px; text-align: center; border-top:solid 1px #ccc; }
.main {  margin: 50px auto 15px; min-height: 720px; }
.section { width: calc(100%); padding-right: 15px; float: left; }
.section-item { margin-bottom: 15px; }
.layer { width: 330px; float: right; padding: 0 15px; }
.section h4 { border-bottom: 1px solid #eaeaea; }
.section h4, .layer h4 { height: 40px; line-height: 40px; }
.section-header h4 span span { margin-left: 10px; color: #9B9B9B; font-size: 13px; }
.active-tag { color: #333333 !important; }
.section-body { margin-top: 10px; }
.card { width: 147px; display: inline-block; box-shadow: 0 5px 5px rgba(0,0,0,0.1); cursor: pointer; margin: 5px 10px; }
/* .card:nth-child(1),.card:nth-child(6) { margin-left: 0; } */
.card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translate3d(0,-2px,0); -webkit-transition: all .2s linear; transition: all .2s linear; }
.card-bg { height: 200px; overflow: hidden;}
.card-info { height: 40px; padding: 10px 5px; text-align: center; }
.card-info p { margin: 5px 0;overflow: hidden; display: list-item; }
.card-info span { overflow: hidden; }
.over { white-space: nowrap; text-overflow: ellipsis; }
.best ul li { height: 30px; line-height: 30px; }
.best ul li a { color: #37a; }

/* detail */
.section-info {}
.section-info1 { width:180px; height: 260px; float: left; }
.section-info2 { width: calc(100% - 195px); padding-left: 15px; float: left; }
.section-info2 p { line-height: 20px; margin-bottom: 5px; }
.section-info2 p div.el-rate { display: inline-block; top: -3px; position: relative; }

/* tagscloud */
#tagscloud{height:250px;position:relative;font-size:12px;color:#333;text-align:center;}
#tagscloud a{position:absolute;top:0px;left:0px;color:#333;font-family:Arial;text-decoration:none;margin:0 10px 15px 0;line-height:18px;text-align:center;font-size:12px;padding:1px 5px;display:inline-block;border-radius:3px;}
#tagscloud a.tagc1{background:#666;color:#fff;}
#tagscloud a.tagc2{background:#F16E50;color:#fff;}
#tagscloud a.tagc3{background:#e6e13c;color:#fff;}
#tagscloud a:hover{color:#fff;background:#0099ff;}

.el-header, .el-footer, .el-container { padding: 0 10%; }
.el-pagination { display: inline-block; }
@media screen and (max-width: 768px) {
  .el-header, .el-footer, .el-container { padding: 0; }
  .el-carousel__container { height: 200px; }
  .search-box { display: none; }
  .top { padding: 15px 15px 0; }
  .section { width: 100%; margin-right: 0; padding: 0 15px; } .layer { display: none; }
  .tag { display: none; }
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .el-header, .el-footer, .el-container { padding: 0; }
  .el-carousel__container { height: 300px; }
  .search-box { display: none; }
  .top { padding: 15px; }
  .section { width: calc(100%); } .layer { width: 185px; }
}
@media screen and (min-width: 1200px) {
  .el-header, .el-footer, .el-container { padding: 0 15%; }
  .el-carousel__container { height: 400px; }
}
